<template>
    <div class="news-list">
      <div class="news-item" v-for="_new in news" :key="_new.newid">
        <img :src="_new.imageName" :alt="_new.title" />
        <div class="news-content">
          <h4>{{ _new.title }}</h4>
          <p>{{ _new.content }}</p>
          <a href="new.link">阅读全文</a>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
import { ref, onMounted,  } from 'vue';
import axios from 'axios'

// 定义响应式数据
const news = ref([])       
const errorMessage = ref('')  

const fetchNews = async () => {
    try {
        const response = await axios.get('http://localhost:3001/getNews')
        news.value = response.data
        errorMessage.value = ''  // 清空错误信息
    } catch (error) {
        console.error('获取数据时发生错误:', error)
        errorMessage.value = '加载数据失败，请稍后再试。'
    }
}
onMounted(fetchNews)
  </script>
  
  <style scoped>
  .news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  .news-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
  }
  
  .news-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  
  .news-content {
    padding: 15px;
  }
  
  .news-content h4 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
  }
  
  .news-content p {
    margin: 0 0 15px;
    font-size: 14px;
    color: #666;
  }
  
  .news-content a {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
  }
  
  .news-content a:hover {
    text-decoration: underline;
  }
  h4:hover{
    color: red;
  }
  p:hover{
    color: red;
  }
  img:hover{ 
    transform:scale(1.1);
}
  </style>